import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
class TabBar extends PureComponent {
    constructor(props) {
        super(props)
    }
    state = {
        route: [{ path: 'Docs', icon: '' }, { path: 'Docs2', icon: '' }, { path: 'Docs3', icon: '' }, { path: 'Docs4', icon: '' }]
    }
    renderRoute(item, index) {
        const { history, location } = this.props;
        const { path, icon } = item;
        return (
            <div key={index} onClick={() => history.push(`/${path}`)} className={location.pathname == `/${path}` ? 'dfc active' : 'dfc'}>
                <div />
                <span>{path}</span>
            </div>
        )
    }
    render() {
        const { route } = this.state;
        return (
            <ul className="dfrsb" style={{ width: '100%', padding: '10px 10px 0' ,height:'10vh'}}>
                {route.map((item, i) => this.renderRoute(item, i))}
            </ul>
        )

    }
}
export default withRouter(connect()(TabBar))
